<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<h1 style="text-align:center" id="msgTitle" class="title">room</h1>
<div class="messageBox">
    <ul id="parentMsg">

    </ul>
</div>
<input type="" name="" value="" placeholder="words" id='msgInput'>
<button type="" onclick="sendMsg()">push</button>

<body>

</body>
<script>
    // 测试的时候这个地方记得换域名
    let ws = new WebSocket('ws://localhost:1258')
    const countFn = (countTime, basicMs, progressFn, callBackFn) => {
        for (let i = 0; i < countTime; ++i) {
            ((j = i) => {
                setTimeout(() => {
                    if (i === 0) {
                        console.log("count start!")
                    }
                    if (i == countTime - 1) {
                        console.log("count done!")
                        callBackFn()
                    } else {
                        progressFn()
                    }
                }, basicMs * j)
            })(i)
        }
    }

    sendMsg = (e) => {
        let value = document.getElementById("msgInput").value
        console.log(value)
        ws.send(value)
        _appendNode(value);

    }

    _appendNode = (value) => {
        let _node = document.createElement('li')
        _node.innerHTML = value
        document.getElementById('parentMsg').appendChild(_node)
        document.getElementById("msgInput").value = ''
    }




    ws.onopen = () => {
        console.log("连接状态", ws);
        ws.send('some one in')
    }
    ws.onmessage = (event) => {
        let _tempString = document.getElementById('msgTitle').innerHTML
        let _tempLength = document.getElementById('msgTitle').innerHTML.length
        document.getElementById('msgTitle').innerHTML = event.data
        setTimeout(() => {
            document.getElementById('msgTitle').innerHTML = _tempString
        }, 2000)
    }
    ws.onerror = (event) => {
        alert('wrong' + event)
    }
    ws.onclose = () => {
        console.log('socket link close')
    }

</script>
<style>

</style>

</html>